<template>
	<view class="detailContainer">
		
		<view class="container">

			<!-- <u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:content>
						<view class='projectFile' v-for="(item,index) in fileList">
							<view class='u-order-title'>{{item.theme}}</view>
							<view class="fileList">
								<view>
									<u-icon name="file-text" color="#285398" size="32"></u-icon>
								</view>
								<view>{{item.name}}</view>
								<view class="downLoad" @click="downLoadFile(item)">下载</view>
							</view>
							<view class="authorTime">
								<view>admin</view>
								<view class="u-order-time">{{item.insertdate}}</view>
							</view>
						</view>
						<view class="projectJd" v-if="currentIndex >= projectList.state">
							<view class='u-order-title'>进度情况</view>
							<u-input v-model='theme' type='textarea' :custom-style="{
								backgroundColor:'#fff',
								borderRadius: '10px',
								padding:'10px 15px',
								marginBottom: '10px'
							}"></u-input>
							<u-button :ripple="true" :hair-line="false" @click="completeJD" type='success' :custom-style="{
									width:'fit-content',
									float:'right',
									color:'#ffffff',
								}">
								已完成
							</u-button>
							<u-button :ripple="true" :hair-line="false" @click="file_upload" :custom-style="{
									width:'fit-content',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}">
								上传附件
							</u-button>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line> -->
			<Qqgz_cp v-if="currentIndex == 0"></Qqgz_cp>
			<Ssjd_cp v-if="currentIndex == 1"></Ssjd_cp>
			
		</view>
		<u-modal v-model="modalShow" title="确认已完成" :show-cancel-button='true' @confirm='ensuerComplete'>
			<view>{{''}}</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Qqgz_cp from "@/components/my_components/project_jd_cp/qqgz_cp.vue"
	import Ssjd_cp from "@/components/my_components/project_jd_cp/ssjd_cp.vue"
	export default {  //进度详情组件
		props: ['title', 'projectInfo','currentIndex'],
		components:{
			Qqgz_cp,
			Ssjd_cp,
		},
		data() {
			return {
				add_data: '',
				theme: '',
				projectList: '',
				fileList:'',
				modalShow:false,
			}
		},
		watch:{
			currentIndex(val){
				this.fileList = this.projectList.files.filter(item =>{
					return item.projectState == val
				})
			}
		},
		mounted() {
			this.getProjectInfo()
		},
		methods: {
			getProjectInfo() {
				uni.request({
					url: this.$my_global.url + `/wx/project/${this.projectInfo.id}`,
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200) {
							this.projectList = res.data.data
							this.$emit('getState', this.projectList.state)
							this.fileList = this.projectList.files.filter(item =>{
								return item.projectState == this.currentIndex
							})
						}
					},
					complete: () => {
						this.loading = false;
					},
				});
			},
			file_upload() { //文件上传
				if (!this.theme) {
					this.$refs.uToast.show({
						title: '请先输入主题',
						type: 'warning',
						position: 'top'
					})
					return
				}
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						if (res.tempFiles[0].path) {
							uni.uploadFile({
								url: this.$my_global.url + `/wx/project/${this.projectInfo.id}`, 
								filePath: res.tempFiles[0].path,
								name: 'f',
								header: {
									"Content-Type": 'multipart/form-data',
									ssid:uni.getStorageSync('token')
								},
								formData: {
									name: res.tempFiles[0].name,
									state: this.currentIndex,
									theme: this.theme
								},
								success: (res) => {
									if (res.data && JSON.parse(res.data).sate == 200) {
										this.$refs.uToast.show({
											title: '上传成功',
											type: 'success',
										});
									}
									this.getProjectInfo()
								},
								error:(err) =>{
									console.log(err)
								}
							});
						}

					}
				});
			},
			downLoadFile(value) {
				uni.downloadFile({
					url: this.$my_global.url + `${value.url}`, 
					header:{
						ssid:uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(res)
							wx.openDocument({
								filePath: res.tempFilePath,
								success: function(res) {
									
								}

							})
							this.$refs.uToast.show({
								title: '下载成功',
								type: 'success',
								position: 'top'
							})
						}
					}
				});
			},
			completeJD(){
				this.modalShow = true
				
			},
			ensuerComplete(){
				uni.request({
					url: this.$my_global.url + `/wx/project/${this.projectInfo.id}`,
					method: 'PUT',
					success: (res) => {
						if (res.data.state == 200) {
							this.getProjectInfo()
						}
					},
					complete: () => {
						if(this.currentIndex < 5){
							this.$emit('changeCurrentIndex', ++this.currentIndex)
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailContainer{
		background-color: #fff;
		width: 100%;
		padding: 0 15px;
	}
	.content_title {
		.content_title_top {
			display: flex;
			align-items: center;

			.title {
				font-size: 18px;
				margin-right: 10px;
				font-weight: bold;
			}
		}

		.time {
			color: #BFC0C2;
			margin-top: 4px;
		}
	}

	.container {
		margin-top: 10px;
		.projectFile {
			background-color: rgba(242, 243, 245, .7);
			border-radius: 5px;
			width: 92%;
			padding: 10px 15px;
			overflow: hidden;
			margin-bottom: 15px;

			.fileList {
				margin-bottom: 8px;
				display: flex;
				align-items: center;
				position: relative;

				>view:nth-of-type(1) {
					margin-right: 8px;
				}

				>view:nth-of-type(2) {
					overflow: hidden;
					width: 60%;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.downLoad {
					position: absolute;
					right: 15%;
					color: #8294FD;
					border-bottom: 1px solid #8294FD;

				}
			}

			.authorTime {
				float: right;
				display: flex;
				align-items: center;

				>view:nth-of-type(1) {
					margin-right: 8px;
				}
			}
		}

		.projectJd {
			background-color: rgba(242, 243, 245, .7);
			border-radius: 5px;
			width: 92%;
			padding: 10px 15px;
			overflow: hidden;
		}
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 8px;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
